<template>
  <div>
    <el-dialog :title="isAdd?'添加菜单':'编辑菜单' " :visible.sync="isShow" :before-close='cancel'>
      <el-form :rules="rules" :model="menuFrom" ref="menufrom" >
        <el-form-item
          label="菜单名称"
          prop="title"
          :label-width="formLabelWidth"
        >
          <el-input autocomplete="off" v-model="menuFrom.title"></el-input>
        </el-form-item>
        <el-form-item
         label="上级菜单"
        :label-width="formLabelWidth"
        prop="pid"
        >
        <el-select v-model="menuFrom.pid" placeholder="请选择"  @change="changePid">
            <el-option label="顶级菜单" :value="0"></el-option>
      <el-option :label="item.title" :value="item.id" v-for="item in $store.getters['menu/getMenuData']"
:key="item.id"
      >
      </el-option>

    </el-select>
        </el-form-item>
        <el-form-item label="菜单图标" :label-width="formLabelWidth" v-if="menuFrom.type==1">
          <!-- <el-input autocomplete="off" v-model="menuFrom.icon"></el-input> -->
    <el-select v-model="menuFrom.icon" placeholder="请选择"  >

      <el-option :label="item" :value="item" v-for="item in iconlist"
:key="item"
      >
        <i :class="item"></i>
      </el-option>

    </el-select>
        </el-form-item>
           <el-form-item label="菜单地址" :label-width="formLabelWidth" v-else>
           <el-select v-model="menuFrom.url" placeholder="请选择">
            <el-option
              v-for="item in indexRoute"
              :key="item.path"
              :label="item.meta.title"
              :value="item.path"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型" :label-width="formLabelWidth">
          <el-radio v-model="menuFrom.type" :label="1" disabled>目录</el-radio>
          <el-radio v-model="menuFrom.type"  :label="2"  disabled>菜单</el-radio>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="menuFrom.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { menuadd, menuinfo, menuedit } from '../../../api/api.js'
import { indexRoute } from '../../../router/index.js'
export default {
  props: ['isShow', 'isAdd'],
  data () {
    return {
      formLabelWidth: '180px',

      rules: {
        title: [
          { required: true, message: '请输入菜单名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        pid: [
          { required: true, message: '请选择上级目录', trigger: 'change' }
        ]
      },
      menuFrom: {
        pid: 0, // 上级分类编号  注意：顶级菜单-0 number
        title: '', // 菜单名称string
        icon: '', // icon图标  string 类型
        type: 1, // 1目录2菜单number
        url: '', // 菜单地址string
        status: 1 //  状态   1正常2禁用   number类型number
      },
      iconlist: ['el-icon-eleme', 'el-icon-phone', 'el-icon-camera'],
      indexRoute: indexRoute
    }
  },
  mounted () {
    console.log(indexRoute)
  },
  methods: {
    add () {
      this.$refs.menufrom.validate((valid) => {
        if (valid) {
          if (this.isAdd) {
            menuadd(this.menuFrom).then(res => {
              if (res.code === 200) {
                this.$store.dispatch('menu/getMeulist')
                this.$message.success(res.msg)
                this.cancel()
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            // 编辑
            menuedit(this.menuFrom).then(res => {
              if (res.code === 200) {
                // 重新调用列表
                this.$store.dispatch('menu/getMeulist')
                this.$message.success(res.msg)
                this.cancel()
              } else {
                this.$message.error(res.msg)
              }
            })
          }

          // 菜单添加接口
        }
      })
    },
    // 清空  规则验证
    reset () {
      this.menuFrom = {
        pid: 0, // 上级分类编号  注意：顶级菜单-0 number
        title: '', // 菜单名称string
        icon: '', // icon图标  string 类型
        type: 1, // 1目录2菜单number
        url: '', // 菜单地址string
        status: 1 //  状态   1正常2禁用   number类型number
      }
      this.$refs.menufrom.resetFields()
    },
    cancel () {
      this.$emit('cancel', false)
      this.reset()
    },
    changePid () {
      // 通过pid来选择是 目录还是 菜单  目录：有图标，没有地址  菜单：没有图标，有地址
      this.menuFrom.type = this.menuFrom.pid === 0 ? 1 : 2
    },
    // 数据回显
    lookup (id) {
    // 菜单获取一条 数据
      menuinfo({ id }).then(res => {
        this.menuFrom = res.list
        this.menuFrom.id = id
      })
    }
  }
}
</script>

<style>
</style>
